<template>
            <div style="padding: 20px">
                <el-card>
                    <el-row type="flex" justify="space-around">
                        <el-col :xs="24" :sm="12" :md="8" :lg="8"></el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8" v-text="formName" class="formTitle"></el-col>
                        <el-col :xs="24" :sm="12" :md="8" :lg="8" style="text-align: right;padding-right: 20px;">
                            <el-button type="primary" v-if="applyForm.status=='0'||applyForm.status=='3'" plain icon="el-icon-check" size="mini" @click="submitMyForm('0')">保存</el-button>
                            <el-button type="warning" v-if="applyForm.status=='0'||applyForm.status=='3'" plain icon="el-icon-success" size="mini" @click="submitMyForm('1')">保存并提交</el-button>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="top15">
                    <div style="height:calc(100vh - 255px)">
                        <el-scrollbar class="page-scroll" style="height: 100%;">
                            <el-divider content-position="left">表单信息</el-divider>
                            <!--自定义表单-->
                            <form-create v-model="fapi" :rule="rule"  :option="option" @submit="warningSubmit" style="padding: 0px 57px 0px 40px;"></form-create>
                            <!--分割线-->
<!--                            <el-divider content-position="left">流程信息</el-divider>-->
                            <!--流程信息-->
<!--                            <div style="padding: 0px 57px 0px 40px;">-->
<!--                                <el-form size="small" :inline="true" label-width="68px">-->
<!--                                    <el-form-item label="启动流程" prop="category">-->
<!--                                        <el-select v-model="applyForm.flowKey" placeholder="请选择要启动的流程" clearable>-->
<!--                                            <el-option v-for="f in flowList" :key="f.key" :label="f.name" :value="f.key"/>-->
<!--                                        </el-select>-->
<!--                                    </el-form-item>-->
<!--                                </el-form>-->
<!--                            </div>-->
                        </el-scrollbar>
                    </div>
                </el-card>
            </div>
</template>

<script>
import {addMyApply, getMyApply, updateMyApply} from "@/api/oa/myApply";
import {getCustomForm} from "@/api/oa/customForm";
import {getAllFlowList} from "@/api/workflow/definition";
import formCreate from "@form-create/element-ui";
import {getModelDetail} from "@/api/workflow/modelDesigner";

export default {
    name: "CreateApply",
    data(){
        return {
            formId:null,
            formName:"",
            xml:"",
            flowImgBase64:"",
            fapi: null,
            rule: [],
            option: {},
            applyForm:{
                id: null,
                name: "",
                category: "",
                formKey: "",
                flowKey: "",
                flowName: "",
                flowInsId: "",
                status:"0"
            },
            // flowList:[],
            hisList:[],
            activeNames: ['1', '2']
        }
    },
    created() {
        const formidOrApplyid = this.$route.params && this.$route.params.formidOrApplyid;
        const createOrApply = this.$route.query && this.$route.query.createOrApply;
        const formName = this.$route.query && this.$route.query.formName;
        this.formName = formName+"单";
        if("create"==createOrApply){//如果是创建--查询表单设计器的规则和表单内容
            this.formId = formidOrApplyid;
            this.loadFormRulesAndOptions(formidOrApplyid);
        }else{//如果是update，查询申请表apply，带出来设计器规则和表单内容
            this.applyForm.id = formidOrApplyid;
            this.getMyApplyData(formidOrApplyid);
        }
    },
    methods:{
        //加载自定义表单数据
        loadFormRulesAndOptions(formId) {
            getCustomForm(formId).then(res => {
                console.log(res)
                if (200 == res.code) {
                    if(res.data){
                        this.title = res.data.name + "单";
                        this.applyForm.name = res.data.name;
                        this.applyForm.category = res.data.category;
                        this.applyForm.formKey = res.data.formKey;
                        this.applyForm.flowKey = res.data.flowKey;
                        let rules = res.data.rules;
                        let options = res.data.options;
                        if(rules){
                            this.rule = formCreate.parseJson(rules);
                        }
                        if(options){
                            this.option = formCreate.parseJson(options);
                        }
                        this.getAllFlowLists(false);
                    }
                }
            });
        },
        // 修改的时候，查询单据信息
        getMyApplyData(applyId){
            getMyApply(applyId).then(res=>{
                if(200==res.code){
                    if(res.data){
                        this.applyForm.id = res.data.id;
                        this.applyForm.name = res.data.name;
                        this.applyForm.category = res.data.category;
                        this.applyForm.formKey = res.data.formKey;
                        this.applyForm.flowKey = res.data.flowKey;
                        this.applyForm.flowInsId = res.data.flowInsId;
                        this.applyForm.status = res.data.status;
                        let rules = res.data.rules;
                        let options = res.data.options;
                        if(rules){
                            this.rule = formCreate.parseJson(rules);
                        }
                        if(options){
                            this.option = formCreate.parseJson(options);
                        }
                        this.getAllFlowLists(true);
                    }
                }
            });
        },
        warningSubmit(){
            this.$modal.msgWarning("请勿使用自定义表单的提交按钮");
        },
        getAllFlowLists(ifUpdate){
            getAllFlowList().then(res=>{
                if(200==res.code){
                    this.flowList = res.data;
                    if(!ifUpdate){//如果是新增，如果表单编号，等于流程编号，默认选中该编号
                        res.data.forEach((item,index)=>{
                            if(item.key==this.applyForm.formKey){
                                this.applyForm.flowKey = item.key;
                            }
                        })

                    }
                }
            })
        },
        //获取流程图xml
        getModelDetailByKey(modelId) {
            getModelDetail(modelId).then(res=>{
                if(200==res.code){
                    this.xml = res.data.xml;
                    this.name = res.data.name;
                    this.description = res.data.description;
                }
            })
            // 发送请求，获取xml
            // this.xml = response.xml
        },
        //保存并提交、保存
        submitMyForm(status){
            if(!this.applyForm.flowKey){
                this.$modal.msgWarning("请先对自定义表单绑定流程后，进行提交");
                return;
            }
            this.flowList.forEach((item,index)=>{
                if(item.key==this.applyForm.flowKey){
                    this.applyForm.flowName = item.name;
                }
            })
            // 调用自定义表单的提交函数，获取表单数据
            this.fapi.submit((formData, a) => {
                let data = this.applyForm;//赋值表单所有数据
                data.rules = JSON.stringify(this.rule);
                data.options = JSON.stringify(this.option);
                data.formData = JSON.stringify(formData);
                data.status = status;
                //赋值流程名称
                this.applyForm.flow
                if(this.applyForm.id){//如果有id，需要更新
                    updateMyApply(data).then(res=>{
                        if(200==res.code){
                            this.$modal.msgSuccess("保存成功");
                            // this.getMyApplyData(this.applyForm.id);
                            this.$tab.closeOpenPage({ path: "/oa/oa/myApply"});
                        }
                    })
                }else{//没有id，需要增加
                    console.log("增加")
                    addMyApply(data).then(res=>{
                        if(200==res.code){
                            this.$modal.msgSuccess("保存成功");
                            // this.getMyApplyData(res.data.id);
                            this.$tab.closeOpenPage({ path: "/oa/oa/myApply"});
                        }
                    })
                }
            },()=>{
                //todo 表单验证未通过
            })
        },
        //提交
        doSubmit(row){

        }
    }
}
</script>

<style  lang="scss"  scoped>
    .formTitle{
        text-align: center;
        font-weight: 900;
        color: #606266;
        font-size: 20px;
    }
    .page-scroll{
        ::v-deep .el-scrollbar__wrap{
            overflow-x: hidden;  /* 隐藏横向的原生滚动条 */
        }
    }
</style>
